<!--隐患事件列表-->
<template>
  <view>
    <uni-row class="demo-uni-row">
      <uni-col :span="6" style="padding-left: 23px; padding-top: 18px">
        <view class="demo-uni-col dark">
          共计:<text>{{ yhsjListData.length }}</text
          >条
        </view>
      </uni-col>
      <uni-col :span="8" style="padding-top: 10px">
        <view class="demo-uni-col light">
          <view>
            <uni-data-select
              label="应用选择"
              emptyText="暂无数据"
              placeholder="请选择处理类型"
              v-model="value"
              :localdata="range"
              @change="change"
            >
            </uni-data-select>
          </view>
        </view>
      </uni-col>
    </uni-row>
    <!--每一项-->

    <view class="order" v-for="(item, index) in yhsjListData" :key="item.id">
      <view class="cu-list">
        <view class="cu-item cugrid">
          <view class="content" @click="gajin(item)">
            <view class="text-grey textgr"
              >隐患类型:
              <text class="cuIcon-title text-orange">{{
                 danger_level[item.dangerLevel]
              }}</text>
            </view>
            <view class="text-grey textgr"
              >隐患来源:
              <text class="cuIcon-title text-orange">{{
                hazard_source[item.dangerSources] 
              }}</text>
            </view>
            <view class="text-grey textgr"
              >上报时间:
              <text class="cuIcon-title text-orange">{{ parseInt(item.createTime) | dateFormat }}</text>
            </view>
            <view class="text-grey textgr"
              >隐患等级:
              <text class="cuIcon-title text-orange">{{
                danger_level[item.dangerLevel] 
              }}</text>
            </view>
            <view class="text-grey textgr"
              >隐患原因:
              <text class="cuIcon-title text-orange">{{
                item.dangerCause
              }}</text>
            </view>
          </view>
          <view>
            <view>
              <u-button
                type="error"
                shape="circle"
                size="small"
                :plain="true"
              >{{ hidden_status[item.dangerStatus]}}</u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { yhsjList } from "@/api/sj/yhsj.js";
import { mapState } from 'vuex'//引入mapState
export default {
  data() {
    return {
      yhsjListData: [],
      warnId: null,
      //  value: 0,
      value: "",
      range: [
        {
          value: 0,
          text: "待处理",
        },
        {
          value: 1,
          text: "已下发",
        },
        {
          value: 2,
          text: "待审核",
        },
				{
				  value: 3,
				  text: "已解决",
				},
				{
				  value: 4,
				  text: "未解决",
				},
				{
				  value: 5,
				  text: "取消",
				},
      ],
      datetimerange: [],
      start: Date.now() - 1000000000,
      end: Date.now() + 1000000000,

      show: false,
      cuIconList: [
        {
          id: 1,
          name: "隐患类型",
          text: "监控设备",
        },
        {
          id: 2,
          name: "隐患来源",
          text: "监控设备001",
        },
        {
          id: 3,
          name: "上报时间",
          text: "2022-11-24 10:00:00",
        },
        {
          id: 4,
          name: "隐患等级",
          text: "陕西未来蓝图",
        },
        {
          id: 5,
          name: "隐患原因",
          text: "陕西未来蓝图",
        },
      ],
    };
  },
  watch: {},
	computed: {
				...mapState({
					danger_level: state => state.sjzd.sjzdList.danger_level,
					hidden_status: state => state.sjzd.sjzdList.hidden_status,
					hazard_source: state => state.sjzd.sjzdList.hazard_source,
					
				})
			},

  mounted() {
    this.getYhsjList();
  },

  methods: {
    change(e) {
			// console.log(this.value)
      this.getYhsjList(e) 
    },
    gajin(item) {
      this.warnId = item.id;
      this.$tab.navigateTo(
        `/pages/work/dangereventetails/index?id=${this.warnId}`
      );
    },
    // 隐患事件列表数据
    getYhsjList(e) {
      yhsjList(e)
        .then((result) => {
          const data = result.data;
          this.yhsjListData = data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 20rpx auto;
  border-radius: 16rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
  letter-spacing: 2rpx;
  box-shadow: 0px 3px 10px 0px rgba(148, 177, 188, 0.38);
}

.page {
  height: 100vh;
  width: 100vw;
}

.cu-list.menu-avatar > .cu-item {
  position: relative;
  display: flex;
  padding-right: 10rpx;
  height: 380rpx;
  background-color: #ffffff;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30rpx;
  border-radius: 30rpx;
}

.cu-list.menu-avatar > .cu-item[data-v-0b41208f] {
  position: relative;
  display: flex;
  padding-right: 10rpx;
  height: 380rpx;
  background-color: #ffffff;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30rpx;
  border-radius: 30rpx;
}

.cu-list.menu-avatar > .cu-item .content {
  position: absolute;
  left: 0px;
  width: calc(100% - 52px - 33px - 66px - 11px);
  line-height: 1.6em;
}

.text-grey,
.line-grey,
.lines-grey {
  color: #848484;
}

.text-orange,
.line-orange,
.lines-orange {
  color: #343434;
}

.cu-list > .cu-item {
  transition: all 0.6s ease-in-out 0s;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.textgr {
  line-height: 48rpx;
}

.cugrid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.example-body {
  background-color: #fff;
  padding: 10px;
}

.title {
  font-size: 14px;
  font-weight: bold;
  margin: 20px 0 5px 0;
}

.data-pickerview {
  height: 400px;
  border: 1px #e5e5e5 solid;
}

.popper__arrow {
  top: -6px;
  left: 50%;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
}

.popper__arrow {
  top: -6px;
  left: 50%;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
}

.u-form-item__body {
  display: flex;
  flex-direction: row;
  padding: 4px 0;
  border: 1px solid #e5e5e5;
}

.example-body[data-v-b41e3472] {
  background-color: #fff;
  padding: 22px 14px 18px 16px;
}
</style>
